import React, { Component } from 'react'
import '../App.css'
import axios from '../utils/request'

export default class Purchase extends Component {
    state = {
        list: []
    };
    add() {
        this.props.history.push('/address')
    }
    componentDidMount() {
        this.getList()
    }
    getList() {
        axios({
            url: "/addresslist",
            method: 'post',
        }).then(res => {
            this.setState({
                list: res.data.data      
            })
        })
    }
    del(id) {
        axios({
            url: "/delcity",
            method: 'delete',
            data: { id: id }
        }).then(res => {
            this.getList()
        })
    }
    render() {
        const { list } = this.state
        return (
            <div className='purchase'>
                <div className='block'>
                    <button onClick={() => this.add()}>+添加地址</button>
                </div>
                <div className='site'>
                    <h5>收货地址</h5>
                    <div className='site_one'>
                        {
                            list.length && list.map((item, index) => {
                                return <div className='site_two' key={index}>
                                    <p>第{index}个地址</p>
                                    <p><span>姓名:&emsp;&emsp;</span><span>{item.name}</span></p>
                                    <p><span>手机号:&emsp;</span><span>{item.phone}</span></p>
                                    <p><span>地区:&emsp;&emsp;</span><span>{item.city}</span></p>
                                    <p><span>详细地址:</span><span>{item.detailcity}</span></p>
                                    <p className='del'>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<button onClick={() => this.del(item.id)}>删除地址</button></p>
                                </div>
                            })
                        }

                    </div>
                </div>
            </div>
        )
    }
}

